<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input type="text" placeholder="搜索商品" v-model="searchValue" @confirm="search" />
      </view>
      <text class="cancel" @click="cancelSearch">取消</text>
    </view>

    <!-- 轮播图 -->
    <view class="swiper-container">
      <swiper 
        class="swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="500"
        @change="swiperChange">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item.image" mode="aspectFill" @click="goBannerDetail(item)"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 图文列表 -->
    <view class="article-list">
      <view class="article-item" v-for="(item, index) in articleList" :key="index" @click="goArticleDetail(item)">
        <image :src="item.image" mode="aspectFill"></image>
        <view class="article-info">
          <text class="article-title">{{ item.title }}</text>
          <text class="article-desc">{{ item.desc }}</text>
          <view class="article-meta">
            <text class="article-time">{{ item.time }}</text>
            <text class="article-author">{{ item.author }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="loading-more" v-if="loading">
      <text>加载中...</text>
    </view>
    <view class="no-more" v-if="!loading && articleList.length >= total">
      <text>没有更多数据了</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      swiperList: [
        { id: 1, image: 'https://picsum.photos/600/200?random=1', title: '轮播图1' },
        { id: 2, image: 'https://picsum.photos/600/200?random=2', title: '轮播图2' },
        { id: 3, image: 'https://picsum.photos/600/200?random=3', title: '轮播图3' }
      ],
      articleList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      isSearch: false,
      searchResult: []
    }
  },
  onLoad() {
    this.getArticleList()
  },
  onReachBottom() {
    if (!this.loading && this.articleList.length < this.total) {
      this.page++
      this.getArticleList()
    }
  },
  methods: {
    // 获取文章列表
    getArticleList() {
      this.loading = true
      
      // 模拟请求数据
      setTimeout(() => {
        // 模拟不同页数据
        const mockData = []
        const start = (this.page - 1) * this.pageSize + 1
        const end = Math.min(this.page * this.pageSize, 50)
        
        for (let i = start; i <= end; i++) {
          mockData.push({
            id: i,
            title: `这是第${i}篇文章的标题`,
            desc: '这是文章的简短描述，展示文章的主要内容概要，吸引用户点击查看详情...',
            image: `https://picsum.photos/200/150?random=${i}`,
            time: '2023-05-0' + (i % 10 + 1),
            author: `作者${i % 10 + 1}`
          })
        }
        
        if (this.isSearch) {
          this.searchResult = [...this.searchResult, ...mockData]
        } else {
          this.articleList = [...this.articleList, ...mockData]
        }
        
        this.total = 50 // 模拟总数据量
        this.loading = false
      }, 1000)
    },
    
    // 搜索
    search() {
      if (!this.searchValue.trim()) {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        })
        return
      }
      
      this.isSearch = true
      this.page = 1
      this.searchResult = []
      this.getArticleList()
    },
    
    // 取消搜索
    cancelSearch() {
      this.searchValue = ''
      this.isSearch = false
      this.page = 1
      this.articleList = []
      this.getArticleList()
    },
    
    // 轮播图切换事件
    swiperChange(e) {
      // console.log('当前轮播索引：', e.detail.current)
    },
    
    // 跳转轮播图详情
    goBannerDetail(item) {
      uni.showToast({
        title: `跳转到${item.title}详情页`,
        icon: 'none'
      })
    },
    
    // 跳转文章详情
    goArticleDetail(item) {
		console.log(`/pages/detail/detail?id=${item.id}`);
		// this.$tab.navigateTo(`/pages/detail/detail?id=${item.id}`)
		this.$tab.reLaunch(`/pages/detail/detail?id=${item.id}`)
      // uni.navigateTo({
      //   url: `/pages/detail/detail?id=${item.id}`
      // })
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 20rpx;
  background-color: #f8f8f8;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 68rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 34rpx;
}

.search-input .iconfont {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.cancel {
  font-size: 28rpx;
  color: #007aff;
  margin-left: 30rpx;
}

.swiper-container {
  height: 320rpx;
  margin: 20rpx 0;
}

.swiper {
  height: 100%;
}

.swiper image {
  width: 100%;
  height: 100%;
}

.article-list {
  padding: 0 20rpx;
}

.article-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.article-item image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

.article-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 10rpx;
}

.article-meta {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.article-time, .article-author {
  font-size: 24rpx;
  color: #999;
}

.article-author {
  margin-left: 20rpx;
}

.loading-more, .no-more {
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #999;
}
</style>    